// 音乐播放器用的是autio标签
// input为range得框上有max属性 value属性 min属性
import React, { Component } from 'react'
import axios from "axios"
import {connect} from "react-redux" // 让当前组件拥有仓库中定义得数据

const Atyle = {
    "marginLeft":"30px"
}
class App extends Component {
state = {
    arr:[],
    index:0
}

componentDidMount(){
     axios.get("/list").then((res)=>{
         console.log(res)
         this.setState({
             arr:res.data
         },()=>{  // 这个函数是在页面render后之后
            this.myRef.onloadedmetadata = ()=>{
                // console.dir(this.myRef.duration) // this.myRef.duration 是获取歌曲有多少秒的
                console.log(this.jindutiao,11111)
                this.jindutiao.max = this.myRef.duration
                console.log(this.endtime)
                this.endtime.innerHTML =  this.changeTime(this.myRef.duration)
            }
            // 监听歌曲播放得变化，让进度条跟着歌曲得播放时间走
            this.myRef.ontimeupdate =  ()=> { // 监听歌曲播放时间得变化
                // 获取最新时间，赋值给开始时间的标签，赋值给进度
                this.jindutiao.value = this.myRef.currentTime.toFixed(2)
                this.nowtime.innerHTML =this.changeTime(this.myRef.currentTime.toFixed(2)) 
            }
            this.jindutiao.onchange=()=>{  // 监听进度条得改变事件，将进度条得value赋值给当前播放得时间
                 this.myRef.currentTime = this.jindutiao.value

            }
         })
       
     })
    // 1.监听歌曲加载完成后得事件
   
}

   // 点击按钮播放
    play () {
        this.myRef.play()
    }
    pause () {
        this.myRef.pause()
    }
    // 点击下一首得事件
    nextSon(){  // 当index超过请求回来得数据的length得时候，是不是要做一个提示，提示没有歌曲了
       
        if (this.state.index >= this.state.arr.length - 1) {
            // alert("已经是最后一首了")
            this.setState({
                index:0
            })
        } else {
            this.setState({
                index:this.state.index+1
            })
        }
        // alert(this.state.index)
       
    }
    // 点击上一首实现得事件
    prev () {
      if (this.state.index == 0) {
            alert("不能上一首了")
      } else {
        this.setState({
            index: this.state.index - 1 
        })
      } 
    }
    // 秒数转化 分钟秒数得函数
     changeTime(second){
        // 一分钟是60秒
        let fen = Math.floor(second/60) // 有几分钟
        let s =  Math.floor(second%60) // 有多少秒
        return `${fen}:${s}`

     }
  render() {
    console.log(this.props,111111)
    return (
      <div>
          <span>我是仓库里的{this.props.name}</span>
          <button onClick={this.play.bind(this)}>播放</button>
          <button onClick={this.pause.bind(this)}>暂停</button>
           <button onClick={this.nextSon.bind(this)}>下一首</button>
           <button onClick={this.prev.bind(this)}>上一首</button>
           <span ref={ref=>this.nowtime=ref}>0</span>
          <input type="range" ref={ref=>this.jindutiao=ref} min="0" defaultValue="0" style={{marginLeft:"20px"}}/>

          {
              this.state.arr&&this.state.arr.length? <audio ref={ref=>this.myRef=ref} src={this.state.arr[this.state.index].src} preload="true" ></audio>:"歌曲获取失败"
          }
          <span style={Atyle} ref={(ref)=>this.endtime = ref }>  0</span>
          {
               this.state.arr&&this.state.arr.length? <p>{this.state.arr[this.state.index].name}</p>:"暂无歌曲"
          }
         
      </div>
    )
  }
}
let mapStateToprps = (state)=>{ //返回仓库中定义得数据的
    return {
        ...state
    }
}
let mapDispatchToprops = (dispatch)=>{ // 返回仓库中的方法得
    return {

    }
}

export default connect(mapStateToprps,mapDispatchToprops)(App)